<template>
    <div class="condition">
      <div class="head-search">
        <el-form :model="searchData" ref="ruleForm" :inline="true" :rules="rules">
          <el-form-item label="连接关系" prop="lianJie">
            <el-select size="small" v-model="searchData.lianJie">
              <el-option label="与" value="与"></el-option>
              <el-option label="或" value="或"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询字段" prop="sear">
            <el-select size="small" v-model="searchData.sear">
              <el-option label="与" value="与"></el-option>
              <el-option label="或" value="或"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="比较关系" prop="compare">
            <el-select size="small" v-model="searchData.compare">
              <el-option label="与" value="与"></el-option>
              <el-option label="或" value="或"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="比较数值" prop="compareValue">
            <el-input size="small" v-model="searchData.compareValue" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSeniorSetting"
                       size="small"
                       type="primary"
                       icon="el-icon-circle-plus-outline">添加条件</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="fun-btn">
        <el-button size="small" type="primary">添加优先关系</el-button>
        <el-button size="small" type="danger" plain>清除优先关系</el-button>
        <el-button size="small" @click="handleEmpty" type="danger" plain>清空条件</el-button>
      </div>

      <div class="list-box">
        <el-table
          ref="table"
          :data="tableData"
          height="calc(100vh - 200px)"
          style="width: 100%">
          <el-table-column
            align="center"
            type="selection"
            fixed="left"
            width="60">
          </el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
          show-overflow-tooltip
            prop="lianJie"
            label="连接关系">
          </el-table-column>
          <el-table-column
          show-overflow-tooltip
            prop="sear"
            label="查询字段">
          </el-table-column>
          <el-table-column
          show-overflow-tooltip
            prop="compare"
            label="比较关系">
          </el-table-column>
          <el-table-column
          show-overflow-tooltip
            prop="compareValue"
            label="比较数值">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="handleDel(scope)"
                         style="color: #F56C6C"
                         type="text">删除条件</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

    </div>
</template>

<script>
export default {
  name: 'conditionSetting',
  data () {
    return {
      searchData: {
        lianJie: '', // 连接关系
        sear: '', // 查询字段
        compare: '', // 比较关系
        compareValue: '' // 比较数值
      },
      rules: {
        lianJie: [
          { required: true, message: '请选择连接关系', trigger: 'blur' }
        ],
        compare: [
          { required: true, message: '请选择比较关系', trigger: 'blur' }
        ],
        sear: [
          { required: true, message: '请选择查询字段', trigger: 'blur' }
        ],
        compareValue: [
          { required: true, message: '请输入比较数值', trigger: 'blur' }
        ]
      },
      tableData: []
    }
  },
  methods: {
    handleSeniorSetting () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.whetherIdentical(this.tableData, this.searchData)) {
            this.tableData.push({
              lianJie: this.searchData.lianJie, // 连接关系
              sear: this.searchData.sear, // 查询字段
              compare: this.searchData.compare, // 比较关系
              compareValue: this.searchData.compareValue // 比较数值
            })
          } else {
            this.$notify({
              title: '警告',
              message: '条件列表中已经存在该条件，请重新选择查询条件！',
              type: 'warning'
            })
          }
        } else {
          return false
        }
      })
    },
    whetherIdentical (arr, obj) {
      let isTrue = false
      arr.map(item => {
        if (JSON.stringify(item) === JSON.stringify(obj)) {
          isTrue = true
        }
      })
      return isTrue
    },
    handleDel (scope) {
      // 删除行
      this.$confirm('是否删除该条查询条件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(scope.$index, 1)
      })
    },
    handleEmpty () {
      // 清空条件
      this.$confirm('是否清空查询条件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData = []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.condition{
  padding: 0 20px;
  overflow-y: auto;
  .fun-btn{
    padding-top: 15px;
  }
}

</style>
